<%@ include file="/common/taglibs.jsp"%>

<head>
    <title><fmt:message key="cityList.title"/></title>
    <meta name="heading" content="<fmt:message key='cityList.heading'/>"/>
    <meta name="menu" content="CityListMenu"/>
    <script type="text/javascript" src="<c:url value='/scripts/jquery/ui/jquery.ui.button.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/scripts/jquery/ui/jquery.ui.datepicker.js'/>"></script>
    <style>
		#toolbar {
			padding: 10px 5px;
		}
		#toolbar2 {
			padding: 10px 5px;
		}
	</style>
</head>

<!-- 
<span id="toolbar" class="ui-widget-header ui-corner-all">
    <button type="button" style="margin-right: 5px" id="addVessel"
        onclick="location.href='<c:url value="/admin/cityForm.html?method=Add&from=list"/>'"
        value="<fmt:message key="button.add"/>"/>
        <fmt:message key="button.add" />
    </button>
    <button type="button" id="doneVessel" onclick="location.href='<c:url value="/mainMenu.html"/>'"
        value="<fmt:message key="button.done"/>"/>
         <fmt:message key="button.done" />
    </button>
</span>
<div class="clear"></div>
 -->
 
<div class="buttons" style="float:left;padding-right:15px;margin-top: 20px;">
<form:form commandName="citySearch" method="post" action="cityList.html">
	<fieldset class="ui-widget ui-widget-content" style="width: 100%;">
		<legend class="ui-widget-header ui-corner-all">
			<fmt:message key="city.searchForm" />
		</legend>
		<table>
			<tr>			
				<td><appfuse:label styleClass="desc" key="cityData.country"/></td>
				<td>				
					<form:select path="country" items="${countryList}" itemLabel="name" itemValue="id" class="select ui-widget-content ui-corner-all" />				    			
				</td>
			</tr>
			<tr>
				<td><appfuse:label styleClass="desc" key="city.txtSearch"/></td>
				<td><form:input path="name" class="select ui-widget-content ui-corner-all"/></td>
			</tr>
			
		</table>
		<button type="button" class="negative" id="searchForm_button_reset"  onclick="resetFields();">
			<fmt:message key="button.reset" />
		</button>
		<button type="submit" class="searchb" id="searchForm_button_search" name="search">
			<fmt:message key="button.search" />
		</button>
	</fieldset>
</form:form>
</div>
<div class="cleaner">
</div>

<display:table name="cityList" cellspacing="0" cellpadding="0" defaultsort="1" id="cityData" pagesize="25" class="listing-tbl" export="true" style="width: 100%;">
    <display:column property="code" sortable="true" titleKey="cityData.code" escapeXml="true" style="width: 30%" 
    url="/admin/cityForm.html?from=list" paramId="id" paramProperty="id"/>
	<display:column property="name" sortable="true" titleKey="cityData.name" style="width: 30%"/>
	<display:column property="country.name" sortable="true" titleKey="cityData.country" style="width: 30%"/>
    
    <display:setProperty name="paging.banner.item_name" value="cityData"/>
    <display:setProperty name="paging.banner.items_name" value="cityList"/>

    <display:setProperty name="export.excel.filename" value="City List.xls"/>
    <display:setProperty name="export.csv.filename" value="City List.csv"/>
    <display:setProperty name="export.pdf.filename" value="City List.pdf"/>
</display:table>

<span id="toolbar">
    <button type="button" style="margin-right: 5px" id="addVessel2"
        onclick="location.href='<c:url value="/admin/cityForm.html?method=Add&from=list"/>'"
        value="<fmt:message key="button.add"/>"/>
        <fmt:message key="button.add" />
    </button>

    <button type="button" id="doneVessel2" onclick="location.href='<c:url value="/mainMenu.html"/>'"
        value="<fmt:message key="button.done"/>"/>
         <fmt:message key="button.done" />
    </button>
</span>

<script type="text/javascript">
$(function() {
	$("#doneVessel" ).button({
        icons: {
            primary: "ui-icon-home"
        }
    });
	
	$("#addVessel" ).button({
        icons: {
            primary: "ui-icon-circle-plus"
        }
    });
	
	$("#doneVessel2" ).button({
        icons: {
            primary: "ui-icon-home"
        }
    });
	
	$("#addVessel2" ).button({
        icons: {
            primary: "ui-icon-circle-plus"
        }
    });
	
	$("#searchForm_button_reset" ).button({
        icons: {
            primary: "ui-icon-trash"
        }
    });
	
	$("#searchForm_button_search" ).button({
        icons: {
            primary: "ui-icon-circle-zoomin"
        }
    });
});
    highlightTableRows("cityData");
</script>
